import { NodeSize } from '../config'

export default function sortedMerge(flow) {
  flow.register('SortedMerge', ({ PolygonNode, PolygonNodeModel, h }) => {
    class Node extends PolygonNode {
      getIconShape() {
        return h(
          'svg',
          {
            width: NodeSize,
            height: NodeSize,
            viewBox: '0 0 1024 1024'
          },
          h(
            'path',
            {
              fill: '#FFFFFF',
              d: 'M104.423619 731.769905h373.784381v97.304381H104.423619zM104.423619 194.925714h373.784381v97.304381H104.423619zM712.630857 463.335619h180.809143v97.304381h-180.809143zM519.631238 463.335619h180.784762v97.304381h-180.784762z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M934.863238 421.912381h-218.575238V233.813333h-196.632381V153.502476H63.000381v180.175238h456.630857v-80.335238h177.127619v168.569905h-218.550857v180.175238h218.550857v168.569905h-177.127619v-80.310857H63.000381v180.175238h456.630857V790.186667h196.632381v-188.099048h218.575238v-180.175238zM104.423619 292.230095V194.925714h373.784381v97.304381H104.423619z m0 536.844191v-97.304381h373.784381v97.304381H104.423619z m789.016381-268.434286h-180.809143v-97.304381h180.809143v97.304381z m-373.808762-97.304381h180.784762v97.304381h-180.784762v-97.304381z'
            }
          ),
          h(
            'path',
            {
              fill: '#FF9C04',
              d: 'M86.016 421.912381h200.752762v41.423238H86.016zM86.016 560.64h103.228952v41.423238H86.016zM86.016 491.27619h151.990857v41.423239H86.016z'
            }
          )
        )
      }

      getLabelShape() {
        return h(
          'text',
          {
            fill: '#000000',
            fontSize: 12,
            x: NodeSize / 2,
            y: NodeSize + 20,
            textAnchor: 'middle',
            dominantBaseline: 'middle'
          },
          '排序合并'
        )
      }

      getShape() {
        const { x, y, width, height } = this.getAttributes()
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        return h(
          'g',
          {
            transform
          },
          [
            h(
              'rect',
              {
                rx: 5,
                ry: 5,
                width: NodeSize,
                height: NodeSize,
                fill: '#fff',
                stroke: '#3D6380',
                strokeWidth: 1
              }
            ),
            this.getIconShape(),
            this.getLabelShape()
          ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor(data, graphModel) {
        super(data, graphModel)
        this.points = [
          [NodeSize / 2, 0],
          [NodeSize, NodeSize / 2],
          [NodeSize / 2, NodeSize],
          [0, NodeSize / 2]
        ]
      }
    }

    return {
      view: Node,
      model: Model
    }
  })
}
